<template>
  <div class="base_detail">
    <!-- <div slot="header">
      <span><i class="el-icon-collection"></i> 基本信息</span>
    </div> -->
    <div class="base_form">
      <el-form
        ref="strategyBaseForm"
        :model="strategyBaseForm"
        :rules="strategyBaseFormRules"
        label-width="80px"
        label-position="top"
      >
        <el-form-item label="策略名称" prop="name" style="width: 95%">
          <el-input
            v-model="strategyBaseForm.name"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-form-item label="客群" style="width: 95%">
          <el-select
            style="width: 100%"
            v-model="strategyBaseForm.customerGroupValue"
            placeholder="请选择客群"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in customerGroupList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道" style="width: 95%" prop="channelValue">
          <el-select
            style="width: 100%"
            v-model="strategyBaseForm.channelValue"
            placeholder="请选择渠道"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in channelList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构" style="width: 95%" prop="organizationValue">
          <el-select
            style="width: 100%"
            v-model="strategyBaseForm.organizationValue"
            placeholder="请选择机构"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in organizationList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="策略描述" prop="desc" style="width: 95%">
          <el-input
            style="width: 100%"
            type="textarea"
            v-model="strategyBaseForm.desc"
          ></el-input>
        </el-form-item>
        <!-- <div
          style="
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 16px;
          "
        > -->
        <el-form-item label="类型" prop="policyType" label-position="left">
          <span slot="label">
            <!-- <span style="color: #ff574c; margin-right: 4px">*</span> -->
            <span style="color: #606266; font-size: 14px; font-weight: 700"
              >类型</span
            >
          </span>
          <el-radio
            v-model="policyType"
            style="margin-left: 16px"
            v-for="(dict, key) in dateSelect8"
            :label="dict.value"
            :key="key"
            >{{ dict.label }}</el-radio
          >
          <!-- <el-checkbox-group v-model="policyType" style="margin-left: 16px">
            <el-checkbox
              v-for="(dict, key) in dateSelect8"
              :label="dict.value"
              :key="key"
              >{{ dict.label }}</el-checkbox
            >
          </el-checkbox-group> -->
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <div v-if="policyType === '1'">
        <p>进入时间</p>
        <span class="type_content_title">用户在</span>
        <el-date-picker
          style="margin-right: 4px; width: 180px"
          v-model="strategyBaseForm.value1"
          type="date"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <el-time-picker
          style="margin-right: 4px; width: 100px"
          value-format="HH:mm"
          format="HH:mm"
          v-model="strategyBaseForm.value2"
        >
        </el-time-picker>
        <span>进入流程</span>
      </div>
      <div class="repetition" v-if="policyType === '2'">
        <span class="type_content_title">用户在</span>
        <el-date-picker
          v-model="strategyBaseForm.deteValue"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2"
          style="margin-right: 4px; width: 240px"
        >
        </el-date-picker>
        <el-select
          v-model="strategyBaseForm.ifDid"
          clearable
          style="width: 90px; margin-right: 4px"
        >
          <el-option
            v-for="dict in dateSelect2"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        <el-select
          v-model="strategyBaseForm.triggerMode"
          clearable
          prefix-icon="el-icon-search"
          style="width: 90px; margin-right: 4px"
        >
          <el-option
            v-for="dict in dateSelect3"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      customerGroupList: [
        {
          value: "1",
          label: "客群1",
        },
        {
          value: "2",
          label: "客群2",
        },
        {
          value: "3",
          label: "客群3",
        },
      ],
      channelList: [
        {
          value: "1",
          label: "渠道1",
        },
        {
          value: "2",
          label: "渠道2",
        },
      ],
      organizationList: [
        {
          value: "1",
          label: "机构1",
        },
        {
          value: "2",
          label: "机构2",
        },
        {
          value: "3",
          label: "机构3",
        },
      ],
      policyType: "1",
      dateSelect6: [
        { value: "1", label: "会员等级提升" },
        { value: "2", label: "全端启动" },
        { value: "3", label: "关注微信公众号" },
        { value: "4", label: "分享商品" },
        { value: "5", label: "加入购物车" },
        { value: "6", label: "参与抽奖" },
        { value: "7", label: "参与活动" },
        { value: "8", label: "发起分享" },
        { value: "9", label: "取关微信公众号" },
      ],
      dateSelect7: [
        { value: "1", label: "是否成功" },
        { value: "2", label: "是否登录ID" },
        { value: "3", label: "是否首日访问" },
        { value: "4", label: "是否首次启动" },
        { value: "5", label: "浏览器名，例如C..." },
        { value: "6", label: "浏览器版本，例..." },
        { value: "7", label: "用户进入计划时间" },
      ],
      dateSelect8: [
        { value: "1", label: "定时型-单次" },
        { value: "2", label: "定时型-重复" },
      ],
      strategyBaseForm: {
        name: "",
        channelValue: "",
        organizationValue: "",
        customerGroupValue: "",
        desc: "",
        policyType: [],
        dynamicShortcutstext2: "",
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
        value7: "",
        value8: "1",
        value9: "1",
        value10: "1",
        value11: "1",
        value12: "1",
        value13: "",
        value14: "",
        value15: "",
        value16: "",
        select: "",
        deteValue: "",
        ifDid: "",
        triggerMode: "",
      },
      strategyBaseFormRules: {
        name: [{ required: true, message: "请输入策略名称", trigger: "blur" }],
        customerGroupValue: [
          { required: true, message: "请选择客群", trigger: "change" },
        ],
        channelValue: [
          { required: true, message: "请选择渠道", trigger: "change" },
        ],
        organizationValue: [
          { required: true, message: "请选择机构", trigger: "change" },
        ],
        policyType: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
      },
      selectStrategyData: {},
      dateSelect2: [
        { value: "1", label: "完成" },
        { value: "2", label: "未完成" },
      ],
      dateSelect3: [
        { value: "1", label: "App推送点击" },
        { value: "2", label: "App激活" },
        { value: "3", label: "App崩溃" },
        { value: "4", label: "APP浏览页面" },
        { value: "5", label: "App点击" },
        { value: "6", label: "App页面浏览" },
        { value: "7", label: "Banner点击" },
      ],
    };
  },
  mounted() {},
  methods: {
    confirm() {
      console.log(11);
      //   this.$refs[strategyBaseForm].validate((valid) => {
      //     if (valid) {
      //       console.log(valid);
      //     } else {
      //       console.log("error submit!!");
      //       return false;
      //     }
      //   });
      this.$emit("controlDetailShow");
    },
  },
};
</script>
<style lang="less" scoped>
.el-form-item {
  margin-bottom: 0;
}
.base_detail {
  margin-top: 20px;
  padding-bottom: 20px;
  .base_form {
    overflow: auto;
    width: 100%;
    height: calc(100vh - 200px);
  }
}
.repetition {
  width: 100%;
  width: 100%;
  display: inline-flex;
  align-items: center;
  .repetition_detail {
    width: 100%;
    display: inline-flex;
    align-items: center;
  }
}
.type_content_title {
  margin-right: 4px;
  width: 60px;
}
</style>
